
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML.it - Guida Bootstrap 3 - Demo - Home page</title>
<!-- Fogli di stile -->
<link
	href='http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic'
	rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet"
	href="assets/plugins/fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">
<link rel="stylesheet" href="assets/css/stili-custom.css">

<!-- Modernizr -->
<script src="assets/js/modernizr.custom.js"></script>

</head>
<body>
	
	<div id="wrap">

	<!-- Sezione slider con Flexslider -->
	<div class="row">
		<div class="col-sm-12">
			<div id="main-slider" class="flexslider">
				<ul class="slides">
					<li><img src="assets/img/flexslider/flex-1.jpg">
						<div class="flex-caption">
							<p class="flex-caption-text">
								<span>Statistiche</span><br> 
								<span>di squadre</span><br>
								<span>e giocatori</span>
							</p>
						</div>
					</li>
					<li>
						<img src="assets/img/flexslider/flex-2.jpg">
						<div class="flex-caption">
							<p class="flex-caption-text">
								<span>Contratti</span><br> 
								<span>ed </span><br> 
								<span>ingaggi</span>
							</p>
						</div>
					</li>
					<li><img src="assets/img/flexslider/flex-3.jpg">
						<div class="flex-caption">
							<p class="flex-caption-text">
								<span>Carriere</span><br> 
								<span>di giocatori</span><br>
								<span>e allenatori</span>
							</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- Contenuti (griglia) -->
	<div class="container">
		<!-- Lead presentazione -->

		<section id="presentazione">
			<div class="row">
				<div class="col-sm-12">
					<p class="lead text-center">
						JCampionato &egrave un sito di statistiche ed informazioni sui
						principali campionati europei. Troverai informazioni su squadre,
						giocatori, carriere dei protagonisti del calcio. <br>Iscrivendoti
						potrai contribuire ad arricchire il sito. <br> <br>Entra
						e tuffati nel mondo di JCampionato.
					</p>
					<p class="lead text-center">
						<a href="../loading.jsp" class="btn btn-lg btn-default">Entra</a>
					</p>
				</div>
				<!-- /.col-sm-12 -->
			</div>
			<!-- /.row -->
		</section>
		<!-- /section presentazione -->

		<!-- Ultimi lavori -->
		<section id="ultimi-lavori">
			<header class="header-sezione">
				<h2>Ultimi lavori</h2>
			</header>
			<div class="row">
				<div class="col-sm-7">
					<div class="box-lavoro-evidenza">
						<h3>Il nuovo sito di JCampionato.it</h3>
						<p>
							Donec id elit non mi porta gravida at <a href="#">eget metus
								id elit mi</a> egetine. Fusce dapibus, tellus ac cursus comodo
							egetine metuss gorp.
						</p>
						<p>Donec id elit non mi porta gravida at eget metus. Fusce
							dapibus, tellus ac cursus commodo, tortor mauris condimentum
							nibh, ut fermentum massa justo sit amet risus etiam sem...</p>
						<p>
							Donec id elit non mi porta gravida at eget metus id elit mi
							egetine. Fusce dapibus, <a href="#">tellus ac cursus</a> comodo
							egetine metuss gorp.
						</p>
						<blockquote>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
								Integer posuere erat a ante.</p>
							<small>Marco Rossi <cite title="Source Title">Direttore
									Marketing</cite></small>
						</blockquote>
					</div>
				</div>
				<!-- /.col-sm-7 -->
				<div class="col-sm-5">
					<div class="box-lavoro-evidenza">
						<img src="assets/img/work-1.jpg"
							class="img-thumbnail img-responsive">
					</div>
				</div>
				<!-- /.col-sm-5 -->
			</div>
			<!-- /.row -->
			<div class="row">
				<div class="col-xs-6 col-sm-3">
					<div class="box-progetto">
						<h4 class="text-center">Lorem.com</h4>
						<a href="assets/img/fancybox/pretty-1.jpg"
							title="Il nuovo sito di Lorem.com"
							class="fancybox thumbnail img-responsive"><img
							src="assets/img/fancybox/pretty-1-th.jpg"
							alt="Il nuovo sito di Lorem.com"></a>
						<p class="text-center">Click per ingrandire</p>
					</div>
				</div>
				<!-- /.col-sm-3 -->
				<div class="col-xs-6 col-sm-3">
					<div class="box-progetto">
						<h4 class="text-center">Lorem.com</h4>
						<a href="assets/img/fancybox/pretty-2.jpg"
							title="Il nuovo sito di Lorem.com"
							class="fancybox thumbnail img-responsive"><img
							src="assets/img/fancybox/pretty-2-th.jpg"
							alt="Il nuovo sito di Lorem.com"></a>
						<p class="text-center">Click per ingrandire</p>
					</div>
				</div>
				<!-- /.col-sm-3 -->
				<div class="col-xs-6 col-sm-3">
					<div class="box-progetto">
						<h4 class="text-center">Lorem.com</h4>
						<a href="assets/img/fancybox/pretty-3.jpg"
							title="Il nuovo sito di Lorem.com"
							class="fancybox thumbnail img-responsive"><img
							src="assets/img/fancybox/pretty-3-th.jpg"
							alt="Il nuovo sito di Lorem.com"></a>
						<p class="text-center">Click per ingrandire</p>
					</div>
				</div>
				<!-- /.col-sm-3 -->
				<div class="col-xs-6 col-sm-3">
					<div class="box-progetto">
						<h4 class="text-center">Lorem.com</h4>
						<a href="assets/img/fancybox/pretty-4.jpg"
							title="Il nuovo sito di Lorem.com"
							class="fancybox thumbnail img-responsive"><img
							src="assets/img/fancybox/pretty-4-th.jpg"
							alt="Il nuovo sito di Lorem.com"></a>
						<p class="text-center">Click per ingrandire</p>
					</div>
				</div>
				<!-- /.col-sm-3 -->
			</div>
			<!-- /.row -->
		</section>
		<!-- /section ultimi lavori -->
		<!-- Notizie e aggiornamenti -->
		<section id="news">
			<header class="header-sezione">
				<h2>News e aggiornamenti</h2>
			</header>
			<div class="row">
				<div class="col-sm-5">
					<div id="segnalazioni-carousel" class="carousel slide">
						<div class="carousel-inner">
							<div class="item active">
								<div class="panel-carousel">
									<div class="panel-carousel-heading">
										<h4>Lorem ipsum</h4>
									</div>
									<div class="panel-carousel-body">
										<p>Vivamus imperdiet condimentum diam, eget placerat felis
											consectetur id. Donec eget orci metus, ac adipiscing nunc.
											Pellentesque fermentum, ante ac interdum ullamcorper. Donec
											eget orci metus, ac adipiscing nunc. Pellentesque fermentum,
											ante ac interdum ullamcorper.</p>
										<p>Vivamus imperdiet condimentum diam, eget placerat felis
											consectetur id. Donec eget orci metus, ac adipiscing nunc.</p>
									</div>
									<div class="panel-carousel-footer">
										<p>
											<a href="#">Leggi tutta la news</a>
										</p>
									</div>
								</div>
							</div>
							<div class="item">
								<div class="panel-carousel">
									<div class="panel-carousel-heading">
										<h4>Lorem ipsum</h4>
									</div>
									<div class="panel-carousel-body">
										<p>Vivamus imperdiet condimentum diam, eget placerat felis
											consectetur id. Donec eget orci metus, ac adipiscing nunc.
											Pellentesque fermentum, ante ac interdum ullamcorper. Donec
											eget orci metus, ac adipiscing nunc. Pellentesque fermentum,
											ante ac interdum ullamcorper.</p>
										<p>Vivamus imperdiet condimentum diam, eget placerat felis
											consectetur id. Donec eget orci metus, ac adipiscing nunc.</p>
									</div>
									<div class="panel-carousel-footer">
										<p>
											<a href="#">Leggi tutta la news</a>
										</p>
									</div>
								</div>
							</div>
							<div class="item">
								<div class="panel-carousel">
									<div class="panel-carousel-heading">
										<h4>Lorem ipsum</h4>
									</div>
									<div class="panel-carousel-body">
										<p>Vivamus imperdiet condimentum diam, eget placerat felis
											consectetur id. Donec eget orci metus, ac adipiscing nunc.
											Pellentesque fermentum, ante ac interdum ullamcorper. Donec
											eget orci metus, ac adipiscing nunc. Pellentesque fermentum,
											ante ac interdum ullamcorper.</p>
										<p>Vivamus imperdiet condimentum diam, eget placerat felis
											consectetur id. Donec eget orci metus, ac adipiscing nunc.</p>
									</div>
									<div class="panel-carousel-footer">
										<p>
											<a href="#">Leggi tutta la news</a>
										</p>
									</div>
								</div>
							</div>
						</div>
						<div class="panel-carousel-nav">
							<p class="text-right">
								<a class="panel-carousel-control" href="#segnalazioni-carousel"
									data-slide="prev"> <span
									class="glyphicon glyphicon-chevron-left"></span>
								</a> <a class="panel-carousel-control" href="#segnalazioni-carousel"
									data-slide="next"> <span
									class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</p>
						</div>
					</div>
				</div>
				<!-- /.col-sm-5 -->
				<div class="col-sm-7">
					<div id="segnalazioni-tab">
						<ul class="nav nav-tabs">
							<li class="active"><a href="#tab-1" data-toggle="tab">Lorem ipsum</a></li>
							<li><a href="#tab-2" data-toggle="tab">Sit dolor</a></li>
							<li><a href="#tab-3" data-toggle="tab">Adipisc nunc</a></li>
							<li><a href="#tab-4" data-toggle="tab">Condim diam</a></li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane active" id="tab-1">
								<p>Vivamus imperdiet condimentum diam, eget placerat felis
									consectetur id. Donec eget orci metus, ac adipiscing nunc.
									Pellentesque fermentum, ante ac interdum ullamcorper. Donec
									eget orci metus, ac adipiscing nunc. Pellentesque fermentum,
									ante ac interdum ullamcorper.</p>
								<p>Vivamus imperdiet condimentum diam, eget placerat felis
									consectetur id. Donec eget orci metus, ac adipiscing nunc.</p>
								<p>Vivamus imperdiet condimentum diam, eget placerat felis
									consectetur id. Donec eget orci metus, ac adipiscing nunc.
									Pellentesque fermentum, ante ac interdum ullamcorper. Donec
									eget orci metus, ac adipiscing nunc. Pellentesque fermentum,
									ante ac interdum ullamcorper.</p>
								<p>Vivamus imperdiet condimentum diam, eget placerat felis
									consectetur id. Donec eget orci metus, ac adipiscing nunc.</p>
							</div>
							<div class="tab-pane" id="tab-2">
								<p>
									Donec id elit non mi porta gravida at <a href="#">eget
										metus id elit mi</a> egetine. Fusce dapibus, tellus ac cursus
									comodo egetine metuss gorp.
								</p>
								<p>Donec id elit non mi porta gravida at eget metus. Fusce
									dapibus, tellus ac cursus commodo, tortor mauris condimentum
									nibh, ut fermentum massa justo sit amet risus etiam sem...</p>
								<p>
									Donec id elit non mi porta gravida at eget metus id elit mi
									egetine. Fusce dapibus, <a href="#">tellus ac cursus</a> comodo
									egetine metuss gorp.
								</p>
							</div>
							<div class="tab-pane" id="tab-3">
								<p>Vivamus imperdiet condimentum diam, eget placerat felis
									consectetur id. Donec eget orci metus, ac adipiscing nunc.
									Pellentesque fermentum, ante ac interdum ullamcorper. Donec
									eget orci metus, ac adipiscing nunc. Pellentesque fermentum,
									ante ac interdum ullamcorper.</p>
								<p>Vivamus imperdiet condimentum diam, eget placerat felis
									consectetur id. Donec eget orci metus, ac adipiscing nunc.</p>
								<p>Vivamus imperdiet condimentum diam, eget placerat felis
									consectetur id. Donec eget orci metus, ac adipiscing nunc.
									Pellentesque fermentum, ante ac interdum ullamcorper. Donec
									eget orci metus, ac adipiscing nunc. Pellentesque fermentum,
									ante ac interdum ullamcorper.</p>
								<p>Vivamus imperdiet condimentum diam, eget placerat felis
									consectetur id. Donec eget orci metus, ac adipiscing nunc.</p>
							</div>
							<div class="tab-pane" id="tab-4">
								<p>
									Donec id elit non mi porta gravida at <a href="#">eget
										metus id elit mi</a> egetine. Fusce dapibus, tellus ac cursus
									comodo egetine metuss gorp.
								</p>
								<p>Donec id elit non mi porta gravida at eget metus. Fusce
									dapibus, tellus ac cursus commodo, tortor mauris condimentum
									nibh, ut fermentum massa justo sit amet risus etiam sem...</p>
								<p>
									Donec id elit non mi porta gravida at eget metus id elit mi
									egetine. Fusce dapibus, <a href="#">tellus ac cursus</a> comodo
									egetine metuss gorp.
								</p>
							</div>
						</div>
					</div>
				</div>
				<!-- /.col-sm-7 -->
			</div>
			<!-- /.row -->
	</div>
	<!-- /.container -->
	
</div>


	<!-- jQuery e plugin JavaScript  -->
	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="assets/bootstrap/js/bootstrap.min.js"></script>
	<script src="assets/plugins/flexslider/jquery.flexslider.js"></script>
	<script src="assets/plugins/fancybox/jquery.fancybox.pack.js"></script>
	<script src="assets/js/scripts.js"></script>
</body>
</html>